<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="val" />
    </div>
  </body>
</html>
<script src="http://chst.vip:8081/vue.js"></script>
<script>
  // watch 用于观察和响应vue实例上的数据变动
  const vm = new Vue({
    el: "#app",
    data: {
      val: "123",
      person: { name: "litter three", age: 24, obj: { hobby: "chi" } },
    },
    watch: {
      val(newVal, oldVal) {
        console.log("new==" + newVal);
        console.log("old==" + oldVal);
      },
      //   深度监听（使用不多）
      person: {
        handler(newVal) {
          //深度监听的处理函数
          console.log("new==" + newVal);
          //   console.log("old==" + oldVal);
        },
        deep: true, //深度监听开启
      },
      //深深深深度监听 （使用最多）
      "person.obj.hobby"(newVal, oldVal) {
        console.log("new==" + newVal);
        console.log("old==" + oldVal);
      },
    },
  });
</script>
